<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色编辑</title>
    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <link href="../../font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <link href="../../js/plugins/ztree/css/metroStyle/metroStyle.css" rel="stylesheet">
    <link href="../../css/style.css" rel="stylesheet">
    <style type="text/css">
        [v-clock] {
            display: none !important;
        }
    </style>
</head>

<body style="background-color: #f3f3f4;" >
    <div class="wrapper wrapper-content animated fadeInRight ibox-content" id="ycapp" v-cloak>
        <form class="form-horizontal m" method="post">
            <div class="form-group">
                <label class="col-xs-3 control-label col-sm-offset-2" style="text-align:right;">角色名称:</label>
                <div class="col-xs-8 col-sm-offset-2">
                    <input type="text" class="form-control" v-model="role.roleName" placeholder="请输入角色名称">
                </div>
            </div>

            <div class="form-group">
                <label class="col-xs-3 control-label col-sm-offset-2" style="text-align:right;">备注:</label>
                <div class="col-xs-8 col-sm-offset-2">
                    <input type="text" class="form-control" v-model="role.remark" placeholder="请输入备注">
                </div>
            </div>

            <div class="form-group">
                <label class="col-xs-3 control-label col-sm-offset-2" style="text-align:right;">权限:</label>
                <div class="col-xs-8 col-sm-offset-2">
                    <ul id="menuTree" class="ztree"></ul>
                </div>
            </div>

            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group" >
                <div class="col-sm-12 col-sm-offset-2" style="text-align: center;">
                    <button type="button" onclick="parentLayerClose()" class="btn btn-default">取消</button>
                    &nbsp;&nbsp;
                    <button type="button" @click="saveOrupdate" class="btn btn-primary">确定</button>
                </div>
            </div>
        </form>
    </div>
    <!-- Mainly scripts -->
    <script src="../../js/jquery-2.1.1.js"></script>
    <script src="../../js/plugins/layer/layer.js"></script>

    <script src="../../js/plugins/ztree/jquery.ztree.all.min.js"></script>

    <script src="../../js/vue.min.js"></script>
    <script src="../../js/common.js"></script>

    <script>
        var setting = {
            check:{enable:true,nocheckInherit:true,chkboxType:{"Y":"ps","N":"ps"}},
            view:{selectedMulti:false,nameIsHTML: true},
            data:{simpleData:{enable:true},key:{title:"title"}},
            callback:{
                beforeClick: function (treeId, treeNode, clickFlag) {
                    var menuTrees = $.fn.zTree.getZTreeObj(treeId);
                    menuTrees.checkNode(treeNode, !treeNode.checked, true, true);
                    return false;
                }
            }
        }
        var ztree;
        var vm = new Vue({
            el:'#ycapp',
            data:{
                title:null,
                role:{
                    id:GetQueryString("id"),
                    roleName:'',
                    remark:''
                }
            },
            methods: {
                saveOrupdate: function(){
                    alert(1);
                },
                getRole:function (id) {
                    if(id != null && id != ""){
                        $.getJSON(baseURL + "sysRole/info/"+id, function(r){
                            if(r.code == '0'){
                                vm.role = r.role;
                            }else{
                                $.modalAlert(r.msg, modal_status.FAIL);
                            }
                        });
                        $.get(baseURL + "sysMenu/list/"+id, function(r){
                            ztree = $.fn.zTree.init($("#menuTree"), setting, r.tree);
                        });
                    }
                },
                getMenuTree: function() {
                    //加载菜单树
                    $.get(baseURL + "sysMenu/list", function(r){
                        ztree = $.fn.zTree.init($("#menuTree"), setting, r.menuList);
                    });
                }
            },
            created: function(){
                if (this.role.id != ""){
                    this.getRole(this.role.id);
                }
                this.getMenuTree();
            }
        });
    </script>

</body>

</html>
